<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo">欢迎你，{{ username }}</div>

      <leftmenu :menu_number="5"></leftmenu>
    </a-layout-sider>
    <a-layout>
      <headmenu></headmenu>
      <!-- <a-layout-header style="background: #fff; padding: 0">
        <a-row style="background: #6495ed; height: 50px">
          <a-col :span="24">
            <a-icon
              class="trigger"
              :type="collapsed ? 'menu-unfold' : 'menu-fold'"
              @click="() => (collapsed = !collapsed)"
            />
            <a-button @click="delete_userinfo">退出登录</a-button>

            <span>
              <a-badge count="2" style="margin-left: 60%">
              <img src="static\邮件图标.jpg" style="width: 20px" />
              <a href="#" class="head-example" />
            </a-badge>

            <a-badge count="5" style="margin-left: 1%">
              <img src="static\铃铛.jpg" style="width: 20px" />
              <a href="#" class="head-example" />
            </a-badge>

            <a-badge count="5" style="margin-left: 30px">
              <img src="static\旗帜.jpg" style="width: 20px" />
              <a href="#" class="head-example" />
            </a-badge>
            <a-avatar :src="photo_url" style="margin-left: 30px" />
            {{username}}
            </span>
          </a-col>
        </a-row>

      </a-layout-header> -->
      <a-layout-content
        :style="{
          margin: '24px 16px',
          padding: '24px',
          background: '#fff',
          minHeight: '500px',
        }"
      >
      
      



      <input type="text" v-model="message">
      <input type="button" value="发送" @click="sendmessage">
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>


 
<script>
import md5 from "js-md5";
import severurl from '../main'
import { send_message } from './axios_http/api'
// 导入组件
import leftmenu from "./leftmenu.vue";
import headmenu from "./headmenu.vue";

export default {
  data() {
    return {
      message_list: new Array,
      message: "",
      msg: "这是一个变量",
      collapsed: false,
      username: localStorage.getItem("username"),
      // 列
      columns: [
        { title: "uid", dataIndex: "uid" },

        // 指定操作列
        {
          title: "operation",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
        },
      ],
      // 具体数据
      dataSource: [],
    };
  },
  //注册组件标签
  components: {
    leftmenu: leftmenu,
    headmenu: headmenu,
    collapsed: false,
  },
  mounted: function () {
    var ed2020 = "2020";

    var sign = md5("price=500&goodid=3,1" + ed2020);

    console.log(sign);
  },
  methods: {
    showDrawer() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
    showChildrenDrawer() {
      this.childrenDrawer = true;
    },
    onChildrenDrawerClose() {
      this.childrenDrawer = false;
    },
  
  
    sendmessage(){
      send_message(this.message).then((resp) => {
        console.log(resp)
      })
    }
  },
   
  created() {
        // 判断浏览器是否支持websocket
    if ("WebSocket" in window) {
      var _this = this
      console.log("支持");
      // 生产websocket链接
      var ws = new WebSocket("ws://192.168.1.65:8000/myapp/messagewebsocket/");

      // 发送链接请求
      ws.onopen = function () {
        console.log("JWT " + localStorage.getItem("token"));
        ws.send("JWT " + localStorage.getItem("token"));
      };

      // 发送消息
      ws.onmessage = (evt) => {
        // 将获取信息打印
        // console.log(">>>",typeof(evt.data));

        _this.message_list.push(JSON.parse(evt.data))

        
      };
      // 捕获关闭链接
      ws.onclose = function () {
        console.log("链接已经关闭");
      };
    }
  },
};
</script>
 
<style scoped>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
</style>